<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="box">
        <p> {{name}} </p>
        <p> {{age}} </p>
    </div>


    <input type="text" placeholder="输入名字">

    <script>

        const obj1 = {
            name: 'cc',
            age: 20
        }


        // 1 获取到标签中的内容  --- 字符串
        // 2 通过正则找到匹配的内容  --- 也就是双大括号里面的内容
        // 3 找到对应的键名 --- 子正则
        // 4 内容的替换



        // render()

        // oninput = function() {
        //     obj.name = this.value
        //     // render()
        // }


        // Object.defineProperty()
        //    get()   访问属性的时候这个函数会自动执行
        //    set()   修改属性的时候这个函数会自动执行



        // get 、 set 只能在  Object.defineProperty()这个里面使用   给一个对象添加属性或者方法



        // 数据劫持
        //    复刻一份数据
        //    复刻的过程中加入行为


        // const obj2 = {};

        // Object.defineProperty(obj2, 'name', {

        //     set(v) {
        //         obj.name = v;
        //         // 行为会在数据发生改变的时候再次触发
        //         render()
        //     },
        //     get() {
        //         return obj.name
        //     }
        // })

        // render()



        // 修饰符  ig

        // const reg = /h/g;
        // console.log(reg.test('hiha'));   // true
        // console.log(reg.lastIndex);   // 1
        // console.log(reg.test('hiha'));   // false
        // console.log(reg.lastIndex);   // 3
        // console.log(reg.test('hiha'));   // true
        // console.log(reg.lastIndex);





        // /^[1-9]\d{2}$/



    </script>

</body>

</html>